<template>
	<div ref="scheduleShiftChart" v-resize="resizeChart" :style="{width: '100%', height: `${height || 300}px`}"></div>
</template>

<script>
    import homeMixin from '../../../../mixins/dom-resize';
    import { borderColor, color, grid, legend } from './chart-conf';
    import * as echarts from 'echarts';
    import Logo from '../../../../layout/components/Sidebar/Logo.vue';

    export default {
        mixins: [homeMixin],
        props: {
            tableData: {
                type: Array,
                default() {
                    return [];
                }
            },
            dataListByTime: {
                type: Array,
                default() {
                    return [];
                }
            },
            dataListByTimeTow: {
                type: Array,
                default() {
                    return [];
                }
            },
            height: {
                type: [String, Number],
                default: 0
            }
        },
        data() {
            return {
                example: null,
                borderColor: '#c5c8ce',
                dates: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24],
                option: {
                    title: {
                        text: '当天整体流速统计',
                        textStyle: {
                            fontWeight: 'bold',
                            fontSize: 20
                        },
                        x: 'center'
                    },
                    color: ['#2b85e4', '#8f75a8'],
                    tooltip: {
                        trigger: 'axis',
                        formatter: (params) => {
                            let str = '';
                            params.forEach((item, index) => {
                                str += `<div>
                                            <div style="display: flex;align-items: center;">
                                                <div style="width: 10px;height: 10px;background: ${params[index].color};border-radius: 100%;margin-right: 6px;"></div>
                                                <div>${params[0].axisValue}</div>
                                            </div>
                                            <div style="margin-left: 14px;">${params[index].seriesName}: ${params[index].data}</div>
                                        </div>`;
                            });
                            return str;
                        }
                    },
                    legend: {
                        left: 'right'
                    },
                    grid: {
                        top: '12%',
                        right: '4%',
                        bottom: '50px',
                        left: '4%',
                        containLabel: true
                    },
                    xAxis: {
                        type: '',
                        splitLine: {
                            show: false
                        },
                        nameTextStyle: {
                            color: 'red'
                        },
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine: {
                            lineStyle: {
                                color: 'none'
                            }
                        },
                        axisLabel: {
                            show: true,
                            color: color
                        },
                        axisLine: {
                            lineStyle: {
                                color: borderColor
                            }
                        }
                    },
                    dataZoom: [
                        {
                            show: true,
                            realtime: true,
                            start: 65,
                            end: 85
                        },
                        {
                            type: 'inside',
                            realtime: true,
                            start: 65,
                            end: 85
                        }
                    ],
                    series: []
                }
            };
        },
        methods: {
            resize() {
                window.addEventListener('resize', () => {
                    this.resizeChart();
                });
            },
            initChart() {
                this.$nextTick(() => {
                    this.example = echarts.init(this.$refs.scheduleShiftChart);
                    this.updateChart();
                });
            },
            updateChart() {
                this.$nextTick(() => {
                    this.option.series = [
                        {
                            name: '异纤机1号-梳棉流速',
                            type: 'line',
                            data: this.dataListByTime.map(x => Number(x.棉流速度) || 0) || [],
                            smooth: false,
                            symbol: 'none',
                            barGap: 0,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            lineStyle: {
                                width: 2
                            }
                        },
                        {
                            name: '异纤机2号-梳棉流速',
                            type: 'line',
                            data: this.dataListByTimeTow.map(x => Number(x.棉流速度) || 0) || [],
                            smooth: false,
                            symbol: 'none',
                            barGap: 0,
                            label: {
                                show: true,
                                position: 'top'
                            },
                            lineStyle: {
                                width: 2
                            }
                        }
                    ];
                    this.option.xAxis.data = this.dataListByTime.map(x => x.belongTime.slice(10, 19) || 0) || [];
                    this.example.setOption(this.option);
                });
            }
        },
        mounted() {
            this.initChart();
            this.resize();
        },
        watch: {
            tableData: {
                handler(newVal) {
                    this.updateChart();
                },
                deep: true
            }
        }
    };
</script>
